<template>
  <div class="block">
    <el-slider
      v-model="value"
      :min="30"
      :max="200"
      class="slider"
      @change="changePageSlider"
    >
    </el-slider>
  </div>
</template>

<script>
import store from '@/store'
export default {
  name: "TopScale",
  data() {
    return {
      value: store.getters.pageScale
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    changePageSlider(data) {
      document.body.style.zoom = data + "%";
      store.commit('SET_PAGESCALE',data)
    },
  },
};
</script>

<style lang="scss" scoped>
.slider {
  margin-top: 15px;
  margin-right: 20px;
  width: 150px;
}
</style>
